#搜索工作
<route lang="yaml">
  meta:
    layout: layout_find
</route>

<script setup lang="ts">

  import {ref} from "vue";
  import job_item from "@/store/job_item";
  import all_job_list from "@/store/all_job_list";
  import recommend_list from "@/store/recommend_list";
  import {search_all_job_with_condition} from "@/store/search_all_job";

  let isInterested = ref(false);

  const toggleInterest = () => {
    isInterested.value = !isInterested.value;
  };

  // 无限滚动条实例代码
  const items = ref(Array.from({length: 30}, (k, v) => v + 1))

  async function api() {
    return new Promise(resolve => {
      setTimeout(() => {
        resolve(Array.from({length: 10}, (k, v) => v + items.value.at(-1) + 1))
      }, 1000)
    })
  }

  async function load({done}) {
    // Perform API call
    const res = await api()

    items.value.push(...res)

    done('ok')
  }

  let loading = ref(false)
  // 使用 let 声明变量保存薪资、学历和工作地点
  let job = ref('');
  let salary = ref('');
  let education = ref('');
  let city = ref('');
  const searchJob = () => {
    search_all_job_with_condition(job.value, salary.value, education.value, city.value);
  }

  // 点击卡片时设置 job_item
  const setJobItem = (item) => {
    job_item.value = item;
  };
</script>

  <template>
    <v-main>
      <div>
        <v-img
          aspect-ratio="16/9"
          cover
          src="@/assets/social/welcome.png"
        ></v-img>
        <v-card
          class="mx-auto mt-n7"
          color="grey-lighten-3"
          max-width="600"
        >
          <v-card-text>
            <v-text-field
              v-model="job"
              :loading="loading"
              append-inner-icon="mdi-magnify"
              label="找到你理想的工作"
              variant="underlined"
              density="compact"
              type="text"
              clearable
              hide-details
              @click:append-inner="searchJob"
              @keyup.enter="searchJob"
            ></v-text-field>
          </v-card-text>
        </v-card>
      </div>
      <v-container>
        <v-row
          id="filter"
          no-gutters
        >
<!--            *hide-selected：**当设置为true时，v-select组件会在下拉菜单中隐藏已经选择的选项，以防止用户再次选择已经选择的选项。这有助于避免用户选择重复的选项。-->
          <v-col>
            <v-select
              chips=""
              clearable=""
              hide-selected=""
              label="岗位薪资"
              :items="['0-3k', '3-6k', '6-9k', '9-12k', '12-15k', '15k以上']"
              variant="underlined"
              v-model="salary"
            ></v-select>
          </v-col>

          <v-col>
            <v-select
              chips=""
              clearable=""
              hide-selected=""
              label="要求学历"
              :items="[ '本科','硕士', '博士', '本科', '大专']"
              variant="underlined"
              v-model="education"
            ></v-select>
          </v-col>


          <v-col>
            <v-select
              chips=""
              clearable=""
              hide-selected=""
              label="工作地点"
              :items="[
              '北京', '天津', '河北', '山西', '内蒙古', '辽宁', '吉林', '黑龙江', '上海', '江苏',
              '浙江', '安徽', '福建', '江西', '山东', '河南', '湖北', '湖南', '广东', '广西',
              '海南', '重庆', '四川', '贵州', '云南', '西藏', '陕西', '甘肃', '青海', '宁夏', '新疆', '香港', '澳门', '台湾'
            ]"
              variant="underlined"
              v-model="city"
            ></v-select>
          </v-col>
        </v-row>
        <v-row
          no-gutters
        >


          <v-col>
            <v-row>
              <v-col>
                <v-list lines="three">

                  <v-infinite-scroll height="65vh" :items="all_job_list" >
                    <template v-for="(item, index) in all_job_list" :key="index">
                      <v-list-item class="mt-4 w-75 card"  border :title="item.岗位" :subtitle="item.公司名称" rounded
                                   @click="setJobItem(item)" @mouseenter="hoverIndex = index"
                                   @mouseleave="hoverIndex = null">
                        <template v-slot:append>
                          <span>{{ item.salary }}</span>
                        </template>
                        <v-row id="work-list">
                          <v-col></v-col>
                        </v-row>
                        <v-row class="mt-5" align="center">
                          <v-col cols="2">
                            <v-avatar image="@/assets/index/avatar.jpg"  rounded></v-avatar>
                          </v-col>
                          <v-col>
                            <transition name="fade" cols="3">
                              <span class="contact">{{ item.hiring_manager }}</span>
                            </transition>
                          </v-col>
                          <v-col class="text-end" cols="5">
                            <transition name="fade">
                              <span class="location">{{ item.city }}</span>
                            </transition>
                          </v-col>
                        </v-row>
                      </v-list-item>
                    </template>
                  </v-infinite-scroll>

                </v-list>
              </v-col>
              <v-col>

                <v-card class="mb-4" prepend-avatar="@/assets/index/avatar.jpg" title="李女士" subtitle="XXXXX" width="100%" elevation="1">
                  <template v-slot:title>
                    <v-row>
                      <v-col>
                        {{ job_item.岗位 }}
                      </v-col>
                      <v-col>
                        {{ job_item.salary }}
                      </v-col>
                    </v-row>
                  </template>
                  <v-row><v-col></v-col></v-row>

                  <template v-slot:subtitle>
                    <v-row>
                      <v-col id="position" cols="3">
                        <v-icon icon="mdi-map-marker-outline" size="x-small"></v-icon>
                        <span>
                  {{ job_item.city }}
                </span>
                      </v-col>
                      <v-col id="xueli">
                        <v-icon icon="mdi-school" size="x-small"></v-icon>
                        {{ job_item.education }}
                      </v-col>
                    </v-row>
                  </template>

                  <template v-slot:append>
                    <v-row>
                      <v-col class="text-end">
                        <div class="interest-btn">
                          <v-btn :class="{ 'red--text': isInterested }" @click="toggleInterest">
                            <v-icon v-if="isInterested">mdi-heart</v-icon>
                            <v-icon v-else>mdi-heart-outline</v-icon>
                            {{ isInterested ? '不感兴趣' : '感兴趣' }}
                          </v-btn>
                        </div>
                      </v-col>
                      <v-col>
                        <v-btn :to="job_item.link.toLowerCase().replace('http://89987om5be14.vicp.fun/', '')">
                          立即联系
                        </v-btn>
                      </v-col>
                    </v-row>
                  </template>

                  <template v-slot:text>
                    <v-row>
                      <v-col>
                        <h2>职位描述：</h2>
                      </v-col>
                    </v-row>
                    <v-row>
                      <v-col class="description-box">
                        <span class="description-text">{{ job_item.description }}</span>
                      </v-col>
                    </v-row>
                    <v-row>
                      <v-col>
                        <h2>工作地址：</h2>
                      </v-col>
                    </v-row>
                    <v-row>
                      <v-col class="description-box2">
                        <span class="address-text">{{ job_item.address }}</span>
                      </v-col>
                    </v-row>
                  </template>
                </v-card>

              </v-col>
            </v-row>
          </v-col>
        </v-row>
      </v-container>
    </v-main>
  </template>

<style scoped>
#work-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.card {
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s, box-shadow 0.3s;
}
.card:hover {
  color: rgb(255, 72, 0);
  transform: translateY(-5px);
  box-shadow: 0px 6px 20px rgba(0, 0, 0, 0.2);
}

.v-avatar {
  width: 40px;
  height: 40px;
}

.contact, .location {
  transition: color 0.3s;
}

/* 图标样式 */
.icon {
  position: absolute;
  font-size: 30px; /* 减小星星的大小 */
  color: #ffd700; /* 星星黄色 */
  z-index: 999; /* 将图标置于最顶层 */
  animation: iconFall 8s linear infinite; /* 调整速度 */
  filter: drop-shadow(0 0 5px #ffd700) drop-shadow(0 0 5px #ffd700) drop-shadow(0 0 5px #ffd700); /* 添加发光效果 */
}


/* 图标下落的动画效果 */
@keyframes iconFall {
  0% {
    transform: translateY(-10%);
  }
  100% {
    transform: translateY(1000%); /* 页面底部 */
  }
}

.title-container {
  margin-top: 10px;
  display: flex;
  justify-content: space-between; /* 水平方向均匀分布 */
  align-items: center; /* 垂直方向居中对齐 */
}

.title {
  font-size: 24px;
  font-weight: bold;
  color: #333;
}

.button {
  padding: 10px;
  background-color: transparent;
  border: none;
  cursor: pointer;
  transition: transform 0.3s;
}

.button:hover {
  transform: scale(1.1);
}

.no-scroll {
  overflow: hidden; /* 禁止滚动 */
}

.title {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  /* 添加发光效果 */
  text-shadow: 0 0 5px #fff, 0 0 10px #ff0, 0 0 15px #f00, 0 0 20px #f00, 0 0 25px #f00, 0 0 30px #f00, 0 0 35px #f00;
  animation: glow 2s infinite linear;
}


@keyframes glow {
  0% {
    text-shadow: 0 0 5px #fff, 0 0 10px #ff0, 0 0 15px #f00, 0 0 20px #f00, 0 0 25px #f00, 0 0 30px #f00, 0 0 35px #f00;
  }
  50% {
    text-shadow: none;
  }
  100% {
    text-shadow: 0 0 5px #fff, 0 0 10px #ff0, 0 0 15px #f00, 0 0 20px #f00, 0 0 25px #f00, 0 0 30px #f00, 0 0 35px #f00;
  }
}

.description-box{
  width: 100%; /* 设置宽度 */
  height: 450px; /* 设置固定高度 */
  overflow-y: auto; /* 添加垂直滚动条 */
  padding-right: 10px; /* 为滚动条留出空间 */
}

.description-box2{
  width: 100%; /* 设置宽度 */
  height: 95px; /* 设置高度 */
}


.interest-btn {
  width: 100px; /* 固定宽度 */
  text-align: right; /* 按钮右对齐 */
}

/* 调整职位描述和工作地点内容大小 */
.description-box span.description-text,
.address-text{
  font-size: 18px; /* 小四号字体大小 */
  line-height: 2.0; /* 设置行间距 */
  font-family: "爱奇艺黑体黑体", cursive; /* 设置为楷体 */
}


.red--text {
  color: red;
}
</style>

